<template>
	<view class="">
		<view class="page">
			<view class="tit">{{good_detail.title}}</view>
			<view class="tag_box"><text class="tag">{{category_name}}</text></view>
			<view class="video" v-if="good_detail.video_id!==0" @click="goVideo(good_detail.video.id)">
				<image :src="good_detail.video.cover_url" class="video-img" mode="scaleToFill"></image>
				<image src="../../static/images/play.png" class="play"></image>
			</view>
			
			<view class="img_box">
				<image v-for="(item,key) in good_detail.detail" :key="key" class="img" :src="item" mode="widthFix"></image>
			</view>
			<view class="empty_box"></view>
		</view>
		<view class="bot_bar">
			<view class="let_bot">
				<view class="item" @click="goCustom">
					<image class="hui" src="../../static/images/zhuye.png" mode=""></image>
					<view class="">定制专区</view>
				</view>
				<view class="item" @click="add_praise(good_detail.id)">
					<image v-if="!good_detail.has_praise" class="xin" src="../../static/pagesA-img/images/aixin.png" mode=""></image>
					<image v-if="good_detail.has_praise" class="xin" src="../../static/pagesA-img/images/hongxim.png" mode=""></image>
					<view class="">{{good_detail.like_count}}</view>
				</view>
			</view>
			<view @click="goPhone" class="bg">咨询定制</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				good_id:0,
				good_detail:{},
				category_name:'',
				stauts_code: 0,
				user_id:0
			}
		},
		onLoad(e) {
			var self = this;
			this.good_id = e.id;
			
		},
		onShow() {
			var self = this;
		
			
			self.$request.request({
				url:'/user/info',
				success:function(res){
					self.stauts_code = res.code
					if(res.code==200){
						self.user_id = res.result.id
					}
					self.$request.request({
						url:'/customized/product_detail',
						data:{
							customized_id:self.good_id,
							user_id:self.user_id
						},
						success:function(res){
							console.log(res)
							if(res.code==200){
								var x = res.result;
								x.detail = JSON.parse(x.detail);
								if(x.video_id!==0){
									x.video.cover_url = self.$oss_img(x.video.cover_url);
								}
								x.detail.forEach((item,index)=>{
									x.detail[index] =self.$http_img(item);
								});
								self.good_detail = x;
								self.getCategoryList();
								
								// #ifdef H5
								let share_time_line={
									title:self.$request.h5_share_name+'.家具定制专区', // 分享标题
									link: self.$request.h5_share_url+'?page=custom-detail&id='+self.good_id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
									imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
								}
								let share_app_message={
									title: self.$request.h5_share_name, // 分享标题
									desc: self.good_detail.title, // 分享描述
									link: self.$request.h5_share_url+'?page=custom-detail&id='+self.good_id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
									imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
								}
								uni.setStorageSync('share_time_line',share_time_line);
								uni.setStorageSync('share_app_message',share_app_message);
								self.$request.wx_config()
								// #endif
								
							}
						}
					});
				}
			});
		},
		methods: {
			getCategoryList(){
				var self = this;
				self.$request.request({
					url:'/customized/category',
					data:{
						brand_id:0,
						only:1
					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							console.log(x)
							x.forEach( (item,index) =>{
								if(item.id == self.good_detail.category_id){
									self.category_name = item.title
								}
							});
						}
					}
				});
			},
			goVideo(id){
				uni.navigateTo({
					url:'../../pages/video-detail/video-detail?id='+id
				})
			},
			goCustom(){
				uni.navigateTo({
					url:'../custom/custom'
				})
			},
			goPhone(){
				uni.makePhoneCall({
					// 手机号
				    phoneNumber: '13684076389', 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			add_praise(id){
				var self = this;
				console.log(id);
				console.log(self.stauts_code);
				
				if(self.stauts_code == 40003){
					uni.navigateTo({
						url:'../../pages/login/login?page=custom-detail&id='+id
					})
				}else{
					self.$request.request({
						url:'/customized/product_praise',
						data:{
							customized_id:id,
							user_id:self.user_id
						},
						success:function(res){
							console.log(res)
							if(res.code==200){
								uni.showToast({
									title:res.msg,
									icon:'none',
									duration:2000
								});
								if(res.msg == '点赞成功！'){
									// self.is_prise = true;
								self.good_detail.has_praise = true;
								self.good_detail.like_count++
									
								}
								
							}else{
								
							}
						}
					});
				}
			}
		}
	}
</script>

<style>
	image{
		pointer-events: none; 
	}
	.page{
		width: 670upx;
		padding: 20upx 40upx;
	}
.img{
	width: 670upx;
}
.tit{
	font-size: 16px;
	/* margin-bottom: 20upx; */
	/* padding: 20upx; */
}
.bot_bar{
	position: fixed;
	width: 710upx;
	height: 100upx;
	padding: 0 20upx;
	left: 0;
	bottom: 0;
	border-top: 5upx solid rgba(0,0,0,.4);
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}
.tag_box{
	margin: 10upx 0;
}
.tag{
	background-color: #C0C0C0;
	padding:5upx 10upx;
}
.video{
	position: relative;
	width: 670upx;
	height: 380upx;
	margin-bottom: 20upx;
}
.empty_box{
	width: 100%;
	height: 100upx;
}
.img_box{
	font-size: 0;
}
.video-img{
	width: 670upx;
	height: 380upx;
}
.video .play{
	position: absolute;
	width: 53upx;
	height: 54upx;
	left: 50%;
	top:50%;
	margin-left: -27upx;
	margin-top: -27upx;
}
.let_bot{
	display: flex;
	justify-content: flex-start;
}
.item{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.hui{
	width: 30upx;
	height: 33upx;
	margin-right: 10upx;
}
.xin{
	width: 22upx;
	height: 20upx;
	margin-right: 10upx;
	margin-left: 40upx;
}
.bg{
	background-color: #892934;
	padding: 5upx 10upx;
	color: #FFFFFF;
}
.write-box{
	position: fixed;
	width: 140upx;
	height: 140upx;
	right: 20upx;
	bottom:200upx;
	z-index: 20;
	font-size: 0;
}
.write{
	width: 140upx;
	height: 140upx;
}
	
</style>
